<template>
	<view class="content">
		<!-- F1:自定义的顶部标题栏 (uni-navbar) -->
		<!-- F2:停车区分布图-->
		<map id="parhingMap" class="parking-map" :style="{height:mapHeight+'px'}" longitude="116.420888"
			latitude="40.06378" scale="15" :markers="mapMarkers" @markertap="doMarkerTap"></map>
		<!-- F3:每个停车区剩余车位统计图-->
		<qiun-data-charts :opts="chartsOptions" :style="{marginTop:'25px',height:chartHeight-30+'px'}" type="column"
			:chartData="parkingchartData"></qiun-data-charts>
		<!-- <text>{{parkingZones}}</text> -->
	</view>
</template>

<script>
	import {
		parkingZoneList
	} from '../../service'
	export default {
		data() {
			return {
				parkingZones: [], //停车区列表
				mapMarkers: [], //地图上的标记物数组(每个标记物指代一个停车区)
				chartHeight: 300, // 统计图的高度
				mapHeight: 0, //地图的高度=屏幕的高度-统计图的高度
				parkingchartData: {},
				chartsOptions: {
					color: [' #009900']
				}
			}
		},
		async onLoad() {
			// 获取整个屏幕的高度，从而计算出地图区域的高度
			uni.getSystemInfo({ //获取系统信息（异步
				success: (result) => {
					//地图高度=窗口高度-统计图高度
					this.mapHeight = result.windowHeight - this.chartHeight
				}
			})
			// 异步请求服务器端停车区
			let data = await parkingZoneList()
			console.log(data);
			this.parkingZones = data
			this.mapMarkers = this.parkingZones.map((pz, i) => {
				return {
					id: i,
					longitude: pz.longitude,
					latitude: pz.latitude,
					// title: pz.zname,
					iconPath: '/static/img/loc.png',
					callout: {
						content: pz.zname +
							"空闲车位:" + pz.unoccupied,
					}
				}
			})
			this.parkingchartData = {
				// x轴
				categories: this.parkingZones.map(pz =>
					pz.zname.substr(-2)
				),
				// categories: [data[0].zname, data[1].zname, data[2].zname, data[3].zname, data[4].zname, data[5].zname],
				// categories: ["一区", "二区", "三区", "四区", "五区", "六区"],
				// y轴,
				series: [{
					name: "空闲车位",
					data: this.parkingZones.map(pz =>
						pz.unoccupied, )
				}, ]
			}
		},
		methods: {
			//处理地图上的标记物被单击事件
			doMarkerTap(e) {
				console.log(e.detail.markerId); //通过事件对象获得标记物的id-即对应的停车区id
				// 把地图的中心点坐标变为当前点击停车区坐标
				let longitude = this.parkingZones[e.detail.markerId].longitude
				let latitude = this.parkingZones[e.detail.markerId].latitude
				// 找到页面中的地图对象/创建地图对应的上下文对象
				let ctx = uni.createMapContext('parhingMap', this)
				ctx.moveToLocation({
					longitude,
					latitude
				})
				// 移动地图的中心点到指定坐标，修改中心点

			}
		}
	}
</script>

<style scoped lang="scss">
	.parking-map {
		width: 750rpx; //官方推荐此处不要使用 %
		// height: 750rpx;
	}
</style>
